<template>
  <view class="container">
    <custom-navbar :immersive="true">
      <template #left>
        <view class="custom-left">
          <image
            src="/static/images/home_title.png"
            mode="widthFix"
            style="width: 200rpx"
          />
        </view>
      </template>
    </custom-navbar>
    <view class="container_header" :style="{ paddingTop: `${navbarHeight}px` }">
      <view class="container_header_search">
        <view> 模具号 </view>
        <uni-search-bar
          @confirm="search"
          @input="input"
          v-model="params.productCode"
          placeholder="请输入"
        >
          <template v-slot:searchIcon>
            <uni-icons color="#1890FF" size="18" type="search" /> </template
        ></uni-search-bar>
      </view>
      <image
        class="container_header_search-icon"
        src="/static/images/home_search_icon.png"
        mode="widthFix"
      />
    </view>
    <view class="container_main">
      <!-- :refresher-enabled="true"
		@refresherrefresh="refresh" -->
      <scroll-view
        class="container_main_scroll"
        :scroll-y="true"
        @scrolltolower="loadMore"
      >
        <view
          class="container_main_scroll_list"
          v-for="(item, index) in list"
          :key="index"
          @click="goDetail(item)"
        >
          <view>
            <image src="/static/images/default_pic.png" mode="widthFix" />
          </view>
          <view class="container_main_scroll_list_info">
            <view class="container_main_scroll_list_info_title">{{
              item.productCode
            }}</view>
            <view class="container_main_scroll_list_info_des"
              ><text class="container_main_scroll_list_info_des_label"
                >规口 |</text
              >
              {{ item.screwMouth }}mm
            </view>
            <view class="container_main_scroll_list_info_des"
              ><text class="container_main_scroll_list_info_des_label"
                >克重 |</text
              >
              {{ item.grammage }}g
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { mouldList } from "@/api/home.js";
import navbarMixin from "@/mixins/navbar.js";
export default {
  mixins: [navbarMixin],
  data() {
    return {
      list: [],
      params: {
        productCode: "",
        page: 0,
        size: 20,
      },
      isLoading: false,
      noMoreData: false,
    };
  },
  onLoad(option) {
    // this.getMouldList();
  },
  onShow() {
    this.list = [];
    this.getMouldList();
  },
  methods: {
    search(event) {
      console.log("event-----" + JSON.stringify(event));
    },
    input(event) {
      console.log("event-----" + JSON.stringify(event));
      this.params.productCode = event;
      this.refresh();
    },
    refresh() {
      this.params.page = 0;
      this.list = [];
      this.getMouldList();
    },
    getMouldList() {
      if (this.isLoading) return;
      this.isLoading = true;
      uni.showLoading({
        title: "加载中",
      });
      mouldList(this.params)
        .then((res) => {
          this.isLoading = false;
          uni.hideLoading();
          console.log("mould---------" + res);
          this.list = this.list.concat(res.content);
          this.noMoreData = res.content.length < this.params.size;
        })
        .catch((e) => {
          uni.hideLoading();
          this.isLoading = false;
          uni.showToast({
            title: e.msg,
            icon: "none",
          });
        });
    },
    loadMore() {
      console.log("loadmore");
      if (this.isLoading || this.noMoreData) return;
      this.params.page++;
      this.getMouldList();
    },
    goDetail(item) {
      uni.navigateTo({
        url:
          "/pages/mount/index?productId=" +
          item.productId +
          "&name=" +
          item.productCode,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background: #f4f5f9;
  display: flex;
  flex-direction: column;

  &_header {
    height: 250rpx;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    margin-bottom: 50rpx;
    background-image: url("/static/images/home_header_bg.png");
    background-repeat: no-repeat;
    background-position: 100%;
    border-bottom-left-radius: 50rpx;
    border-bottom-right-radius: 50rpx;
    padding-top: 120rpx;
    padding-left: 20rpx;

    &_icon {
      width: 200rpx;

      image {
        width: 100%;
        height: auto;
      }
    }

    &_search {
      background-color: white;
      padding: 10rpx 20rpx;
      border-radius: 10rpx;
      position: absolute;
      bottom: -30rpx;
      left: 20rpx;
      right: 20rpx;
    }

    &_search-icon {
      width: 150rpx;
      position: absolute;
      right: 50rpx;
      top: 180rpx;
    }
  }

  &_main {
    flex: 1;

    overflow-y: auto;

    &_scroll {
      height: 100%;

      &_list {
        display: flex;
        background-color: white;

        margin: 0 20rpx 20rpx 20rpx;
        border-radius: 10rpx;
        padding: 20rpx;

        image {
          width: 160rpx;
        }

        &_info {
          margin-left: 20rpx;

          &_title {
            font-size: 30rpx;
            font-weight: bold;
          }

          &_des {
            margin-top: 10rpx;

            &_label {
              font-size: 26rpx;
              color: #999;
              margin-right: 10rpx;
            }
          }
        }
      }
    }
  }
}
</style>
